<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有人智造-质检IQC看板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
</head>
<style>
    .body{
        width: 100%;
        height: 1500px;
        /*background-color: #f5f7fa;*/
        font-size: 25px;
        background: linear-gradient(to bottom right, blue, pink);
        background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
        background-size: cover;
    }

    h1{
        width: 30%;
        margin: 0 auto;
        color: white;
        background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
        linear-gradient(45deg, transparent 34px, #134194 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }
    h3{
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        color: white;
        background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 20px;
        padding-left: 20px;
        /*font-size: 20px;*/
    }
    .divTop{
        height: 50%;
        /*background-color: red;*/
        /*margin-bottom: 20px;*/
        display: flex;
    }
    .top1{
        width: 20%;
        height: 100%;
        margin-right: 30px;
        /*background-color: #7bd4ce;*/
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        background: linear-gradient(to bottom right, white, blue);
    }
    .top11{
        width: 100%;
        height: 80px;
        background-color: white;
        border-radius: 50px;
        display: flex;
        margin-top: 35px;
    }
    .top111{
        width: 30%;
        height: 80px;
        border-radius: 50px 0 0 50px;
        /*background-color: red;*/
        text-align: center;
        color: white;
        line-height: 80px;
        /*font-size: 15px;*/
        background: linear-gradient(to bottom right, blue, pink);
    }
    .top112{
        width: 70%;
        height: 80px;
        border-radius: 0 50px 50px 0;
        background-color: green;
        text-align: center;
        color: white;
        line-height: 40px;
        /*font-size: 15px;*/
        background: linear-gradient(to bottom right,#666aff, #7bd4ce);
    }
    .top2{
        width: 82%;
        height: 500px;
        background-color: #caf2ff;
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        /*font-size: 13px;*/
    }
    table th:nth-child(odd){
        background-color: #2bb9ba;
        color: white;
    }
    table th:nth-child(even){
        background-color:#134094;
        color: white;
    }
    table tr:nth-child(odd){
        background-color: #7bd4ce;
        color: white;
    }
    .container {
        max-width: 5000px;
        width: 100%;
        /*background-color: red;*/
        height: 400px; /* 设置容器的高度 */
        overflow: auto; /* 启用垂直滚动 */
        padding: 0;
        overflow-y: hidden;
        position: relative; /* 相对定位以容纳滚动内容 */
        /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
    }
    .container1{
        width: 100%;
        position: absolute; /* 绝对定位 */
        top: 0; /* 初始位置为顶部 */
        /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
        animation-name: scroll;
        /*animation-duration: 800s;*/
        animation-timing-function: linear;
        /*animation-delay: 1s;*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }


    .container2 {
        max-width: 5000px;
        width: 100%;
        /*background-color: red;*/
        height: 150px; /* 设置容器的高度 */
        overflow: auto; /* 启用垂直滚动 */
        /*margin-left: 100px;*/
        overflow-y: hidden;
        position: relative; /* 相对定位以容纳滚动内容 */
    }
    .container21{
        width: 100%;
        position: absolute; /* 绝对定位 */
        top: 0; /* 初始位置为顶部 */
        /*animation: scroll 20s linear infinite; !* 使用动画滚动 *!*/
        animation-name: scroll;
        /*animation-duration: 800s;*/
        animation-timing-function: linear;
        /*animation-delay: 1s;*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }
    /* 滚动动画 */
    @keyframes scroll {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-100%);
        }
    }



    .divBottom{
        height: 500px;
        /*background-color: green;*/
        /*font-size: 12px;*/
        margin-top: 10px;
    }
    .bottom1{
        width: 100%;
        height: 50%;
        /*margin-right: 100px;*/
        background-color: #caf2ff;
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        margin-bottom: 10px;

    }
    .bottom2{
        width: 100%;
        height: 50% ;
        background-color: #caf2ff;
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
    }
    .table1 tr th{
        padding: 0;
        text-align: center;
    }
    .table1 tr td{
        padding: 0;
        /*text-align: center;*/
    }
    .return{
        position: fixed;
        top: 10px;
        left:10px;
        width: 50px;
        height: 50px;
    }
</style>
<body class="body">
<div class="main" style="width: 100%;margin:0 auto;" >
    <img src="/static/img/return.png" alt="返回总控台" class="return">
    <h1 style="text-align: center ">IQC看板</h1>
<!--    分为四块，数量一部分，当前待检任务单一部分，今日已检任务单一部分，今日不良数据一部分-->
    <div style="width: 100%;height: 100%; ">
        <div class="divTop">
            <div class="top1">
             <h3>IQC段检验数量统计</h3>
                <div id="count">
                <div class="top11">
                    <div class="top111">当前待检</div>
                    <div class="top112">
                        数量：{$data1['sumNum']} <br>
                        单据数：{$data1['CodeNum']}
                    </div>
                </div>
                <div class="top11">
                    <div class="top111">今日已检</div>
                    <div class="top112">
                        数量：{$data2['sumNum']} <br>
                        单据数：{$data2['CodeNum']}
                    </div>
                </div>
                <div class="top11">
                    <div class="top111">昨日已检</div>
                    <div class="top112">
                        数量：{$data3['sumNum']} <br>
                        单据数：{$data3['CodeNum']}
                    </div>
                </div>
                <div class="top11">
                    <div class="top111">昨日不良</div>
                    <div class="top112">
                        数量：{$data3['NgSumNum']} <br>
                        单据数：{$data3['NgCodeNum']}
                    </div>
                </div>
                </div>
            </div>
            <div class="top2">
                <h3>当前待检任务单</h3>
<!--                表头和表体分离-->
                <div style="width: 100%;margin-bottom: -15px;margin-top: -20px">
                <table class="table table1">
                   <tr style="text-align: center;font-size: 20px">
                       <th width="30px">序号</th>
                       <th width="200px">检验单号</th>
                       <th width="60px">是否加急</th>
                       <th width="170px">物料料号</th>
                       <th width="150px">物料品名</th>
                       <th width="220px">供应商</th>
                       <th width="100px">送检数量</th>
                       <th width="150px">送检完成时间</th>
                       <th width="150px">检验开始时间</th>
                   </tr>
                </table>
                </div>
                <div class="container">
                    <div class="container1" style="animation-duration:{$data1['sumNum']*2}s">
                <table class="table table1">
                    <tbody id="table1">
                    {foreach $data1['data'] as $k=>$v}
                    <tr style="text-align: center">
                        <td width="30px">{$k+1}</td>
                        <td width="200px">{$v['DOC_NO']}</td>
                        <td width="60px">{$v['IS_URGENT']}</td>
                        <td width="170px">{$v['ITEM_CODE']}</td>
                        <td width="150px">{$v['ITEM_NAME']}</td>
                        <td width="220px">{$v['SUPPLIER_NAME']}</td>
                        <td width="100px">{$v['SEND_QTY']}</td>
                        <td width="150px">{$v['SEND_END_TIME']}</td>
                        <td width="150px">{$v['TEST_START_TIME']}</td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="divBottom">
            <div class="bottom1">
              <h3>今日已检任务单</h3>
                <!--                表头和表体分离-->
                <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
                <table class="table table1" >
                    <tr style="text-align: center;font-size: 20px">
                        <th width="30px">序号</th>
                        <th width="200px">检验单号</th>
                        <th width="60px">是否加急</th>
                        <th width="170px">物料料号</th>
                        <th width="150px">物料品名</th>
                        <th width="220px">供应商</th>
                        <th width="100px">送检数量</th>
                        <th width="100px">应抽数量</th>
                        <th width="100px">实抽数量</th>
                        <th width="100px">不良数量</th>
                        <th width="150px">送检完成时间</th>
                        <th width="150px">检验开始时间</th>
                    </tr>
                </table>
                </div>
                    <div class="{if $data2['sumNum']>=3}container2{/if}">
                        <div class="{if $data2['sumNum']>=3}container21{/if}" style="animation-duration:{$data2['sumNum']*4}s">
                            <table class="table table1" style="margin: 0 auto">
                                <tbody id="table2" >
                                {foreach $data2['data'] as $k=>$v}
                                <tr style="text-align: center">
                                    <td width="30px">{$k+1}</td>
                                    <td width="200px">{$v['DOC_NO']}</td>
                                    <td width="60px">{$v['IS_URGENT']}</td>
                                    <td width="170px">{$v['ITEM_CODE']}</td>
                                    <td width="150px">{$v['ITEM_NAME']}</td>
                                    <td width="220px">{$v['SUPPLIER_NAME']}</td>
                                    <td width="100px">{$v['SEND_QTY']}</td>
                                    <td width="100px">{$v['PLAN_QTY']}</td>
                                    <td width="100px">{$v['REAL_QTY']}</td>
                                    <td width="100px">{$v['ERROR_QTY']}</td>
                                    <td width="150px">{$v['SEND_END_TIME']}</td>
                                    <td width="150px">{$v['TEST_START_TIME']}</td>
                                </tr>
                                {/foreach}
                                </tbody>
                            </table>
                        </div>
                    </div>

            </div>
            <div class="bottom2">
              <h3>今日不良数据</h3>
                <!--                表头和表体分离-->
                <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
                    <table class="table table1">
                        <tr style="text-align: center;font-size: 20px">
                            <th width="30px">序号</th>
                            <th width="200px">检验单号</th>
                            <th width="60px">是否加急</th>
                            <th width="170px">物料料号</th>
                            <th width="150px">物料品名</th>
                            <th width="220px">供应商</th>
                            <th width="100px">送检数量</th>
                            <th width="100px">应抽数量</th>
                            <th width="100px">实抽数量</th>
                            <th width="100px">不良数量</th>
                            <th width="150px">送检完成时间</th>
                            <th width="150px">检验开始时间</th>
                        </tr>
                    </table>
                </div>
                <div class="{if $data2['NgSumNum']>=3}container2{/if}">
                    <div class="{if $data2['NgSumNum']>=3}container21{/if}" style="animation-duration:{$data2['NgSumNum']*2}s">
                        <table class="table table1" style="margin: 0 auto">
                            <tbody id="table3">
                            {foreach $data2['NG'] as $k=>$v}
                            <tr style="text-align: center;">
                                <td width="30px">{$k+1}</td>
                                <td width="190px">{$v['DOC_NO']}</td>
                                <td width="60px">{$v['IS_URGENT']}</td>
                                <td width="150px">{$v['ITEM_CODE']}</td>
                                <td width="150px">{$v['ITEM_NAME']}</td>
                                <td width="200px">{$v['SUPPLIER_NAME']}</td>
                                <td width="100px">{$v['SEND_QTY']}</td>
                                <td width="100px">{$v['PLAN_QTY']}</td>
                                <td width="100px">{$v['REAL_QTY']}</td>
                                <td width="100px">{$v['ERROR_QTY']}</td>
                                <td width="150px">{$v['SEND_END_TIME']}</td>
                                <td width="150px">{$v['TEST_START_TIME']}</td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(".return").click(function (){
        window.history.back();
    })
    //定时刷新
    // // 定义定时器，每隔一定时间执行刷新操作
    // var refreshInterval = setInterval(function() {
    //     // location.reload(); // 刷新页面
    //     $.ajax({
    //         url:'iqc',
    //         type:'get',
    //         dataType:'json',
    //         success:function (res){
    //             //异步刷新看板数据
    //             var table1=document.getElementById('table1')
    //             table1.innerHTML=''
    //             var html1=''
    //             $.each(res.data1.data,function (i,v){
    //                 if(v.TEST_START_TIME==null){
    //                     v.TEST_START_TIME=''
    //                 }
    //                 i+=1
    //                 html1+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="200px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td><td width="170px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="220px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
    //             })
    //             table1.innerHTML=html1
    //
    //             var table2=document.getElementById('table2')
    //             table2.innerHTML=''
    //             var html2=''
    //             $.each(res.data2.data,function (i,v){
    //                 i+=1
    //                 html2+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="190px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td> <td width="150px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="200px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="100px">'+v.PLAN_QTY+'</td><td width="100px">'+v.REAL_QTY+'</td><td width="100px">'+v.ERROR_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
    //             })
    //             table2.innerHTML=html2
    //
    //             var table3=document.getElementById('table3')
    //             table3.innerHTML=''
    //             var html3=''
    //             $.each(res.data2.NG,function (i,v){
    //                 i+=1
    //                 html3+='<tr style="text-align: center"><td width="30px">'+i+'</td><td width="190px">'+v.DOC_NO+'</td><td width="60px">'+v.IS_URGENT+'</td> <td width="150px">'+v.ITEM_CODE+'</td><td width="150px">'+v.ITEM_NAME+'</td><td width="200px">'+v.SUPPLIER_NAME+'</td><td width="100px">'+v.SEND_QTY+'</td><td width="100px">'+v.PLAN_QTY+'</td><td width="100px">'+v.REAL_QTY+'</td><td width="100px">'+v.ERROR_QTY+'</td><td width="150px">'+v.SEND_END_TIME+'</td><td width="150px">'+v.TEST_START_TIME+'</td></tr>'
    //             })
    //             table3.innerHTML=html3
    //
    //             table4=document.getElementById('count')
    //             table4.innerHTML=''
    //             var html4=''
    //             html4= '<div class="top11"><div class="top111">当前待检</div><div class="top112">数量：'+res.data1.sumNum+'<br>单据数：'+res.data1.CodeNum+'</div></div> <div class="top11"> <div class="top111">今日已检</div> <div class="top112">数量：'+res.data2.sumNum+' <br>单据数：'+res.data2.CodeNum+' </div> </div> <div class="top11"> <div class="top111">昨日已检</div> <div class="top112">数量：'+res.data3.sumNum+' <br>单据数：'+res.data3.CodeNum+'  </div> </div> <div class="top11"> <div class="top111">昨日不良</div><div class="top112">数量：'+res.data3.NgSumNum+'<br>单据数：'+res.data3.NgCodeNum+' </div></div>'
    //             table4.innerHTML=html4
    //         },
    //         error:function (){
    //             console.log('网络故障')
    //             location.reload()
    //         }
    //     })
    // }, 5000); // 5000 毫秒（5 秒）间隔
</script>
</html>